@import "./variables/index";

.wrapper {
  height: 100%;
  display: flex;

  .navigator-wrapper {
    width: 80px;
  }

  .content-wrapper {
    flex: 1;
  }

  .tabs-wrapper {
    display: flex;
    height: $main-tab-height;
    border-width: 2px 0 0;
    border-top-style: solid;
    border-top-color: #e1bf52;

    .tab-item {
      font-size: 16px;
      color: #7da9cc;
      line-height: 60px;
      font-weight: 700;
      padding: 0 15px;
      cursor: pointer;
      position: relative;

      &:hover {
        color: #fff;
      }

      &.active {
        padding-left: 55px;
        padding-right: 35px;
        color: #a18b6e;

        &:before {
          content: '';
          height: 100%;
          position: absolute;
          width: 45px;
          left: 0;
        }

        &:after {
          content: '';
          height: 100%;
          position: absolute;
          width: 24px;
          right: 0;
        }
      }
    }
  }
}

.content {
  height: calc(100% - #{$--head-height} - #{$main-tab-height});
  display: flex;
  overflow: hidden auto;

  .device-tree {
    width: 240px;
    height: 100%;
    overflow: auto;
  }

  .view-box {
    flex: 1;
    height: 100%;
    overflow: hidden; //add by weiloong, fix el-table responsive

    .device-info {
      color: $resource-path-color;
      height: $resource-path-height;
      line-height: $resource-path-height;
      padding-left: 15px;
    }

    .main-view-content {
      height: 100%;
      overflow: hidden auto;

      &.show-tree {
        height: calc(100% - #{$resource-path-height});
      }
    }
  }

}

